<template>
  <div class="bigbox">
    <!-- 页面搜索栏盒子 -->
    <div class="topbox">
      <el-form :model="form" label-position="left" label-width="80px">
         <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="建筑群">
              <!-- <el-select size="small" v-model="form.buildingId" @change="changeqiye">
                <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
              </el-select> -->
              <FilterSelect2
                    v-model="form.buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqiye"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="用能类型">
              <el-select size="small" v-model="form.energyType" style="width: 100%;">
                <el-option v-for="(item,index) in yomgnenglist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="用户">
              <!-- <el-select size="small" v-model="form.customerId" filterable >
                <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.customerName" :value="item.id" class="option"></el-option>
              </el-select> -->
              <FilterSelect2
                    v-model="form.customerId"
                    :optionlist="yonghulist"
                    :valuekey="{ name: 'customerName', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="月份">
              <el-date-picker
                style="width: 100%;"
                size="small"
                value-format="yyyy-MM"
                v-model="form.month"
                type="month"
                placeholder="选择月">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right;">
            <el-form-item>
              <el-button @click="chongzhi" size="small">重 置</el-button>
              <el-button @click="getdatalist()" type="primary" size="small">查 询</el-button>
            </el-form-item>
          </el-col>
         </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="title">
        <div>分摊报表</div>
        <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
      </div>
      <div class="tablebox">
      <template>
          <el-table
          :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
          v-loading="loading"
          border
          height="calc(100% - 1px)"
          @expand-change="expandChange"
          :data="tableData"
          :size="issize"
            style="width: 100%">
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column type="expand">
              <template slot-scope="props">
                <div style="padding: 10px 10px 10px 30px;background-color: #f2f8ff;">
                  <el-table
                  border
                  ref="myTable"
                  :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
                  :data="props.row.apportionMeterChildrenList"
                  style="width: 100%">
                  <el-table-column
                    prop="meterName"
                    label="公共表">
                  </el-table-column>
                  <el-table-column
                    prop="publicConsumption"
                    label="公共表用量(kWh/吨)">
                  </el-table-column>
                  <el-table-column
                    prop="publicFee"
                    label="公共表费用(元)">
                  </el-table-column>
                  <el-table-column
                    prop="modelName"
                    label="分摊模型">
                  </el-table-column>
                  <el-table-column
                    prop="dayOfMonth"
                    label="分摊日期">
                  </el-table-column>
                  <el-table-column
                    prop="ratio"
                    label="分摊比例(%)">
                  </el-table-column>
                  <el-table-column
                    prop="apportionConsumption"
                    label="分摊用量(kWh/吨)">
                  </el-table-column>
                  <el-table-column
                    prop="apportionFee"
                    label="分摊费用(元)">
                  </el-table-column>
                </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="建筑群名称"
              prop="buildingName">
            </el-table-column>
            <el-table-column
              label="用户名称"
              prop="customerName">
            </el-table-column>
            <el-table-column
              label="房间名称"
              prop="roomName">
            </el-table-column>
            <el-table-column
              label="表计名称"
              prop="meterName">
            </el-table-column>
            <el-table-column
              label="月份"
              prop="statisticsMonth"
              align="center">
            </el-table-column>
            <el-table-column
              label="表计总用量(kWh)"
              prop="totalConsumption">
            </el-table-column>
            <el-table-column
              label="表计总费用(元)"
              prop="totalFee">
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="getdatalist"
                :total="+totalCount">
          </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import { exportexcel } from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { getzidianxialaapi } from '@/api/guidelines'
import { gettablelistapi } from '@/api/prwpaid/user-manage/OpenAaccount'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
import { getfenreportapi, getreportxiangqingapi } from '@/api/prwpaid/shares/share-report'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data () {
    return {
      loading: false,
      totalCount: '',
      issize: 'medium',
      form: { buildingId: '', energyType: '', customerId: '', month: '' },
      qiyelist: [],
      yomgnenglist: [],
      yonghulist: [],
      tableData: [],
      pageobj: {
        pageNo: 1,
        pageSize: 20
      }
    }
  },

  async mounted () {
  // 获取用能类型
    const yonghu = await getzidianxialaapi({ dictType: 'MBM_ENERGY_TYPE' })
    this.yomgnenglist = yonghu.data.list
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId)
    if (isBuildIdInArray) {
      this.form.buildingId = localbuildingId || ''
      this.getyonghuxialalist(this.form.buildingId)
    } else {
      this.form.buildingId = ''
    }
    this.getdatalist()
  },

  methods: {
    // 企业下拉
    changeqiye (val) {
      localStorage.setItem('buildingId', val)
      this.getyonghuxialalist(val)
    },
    // 获取用户
    async getyonghuxialalist (val) {
      const ress = await gettablelistapi({
        pageNo: 0,
        pageSize: 500,
        startDate: '',
        endDate: '',
        state: '20',
        buildingId: val,
        customerType: ''
      })
      this.yonghulist = ress.data.list
    },
    // 获取表格数据
    async getdatalist () {
      this.loading = true
      const { data: { list, totalCount } } = await getfenreportapi({
        pageNo: this.pageobj.pageNo - 1,
        ...this.form,
        pageSize: this.pageobj.pageSize
      })
      list.forEach(ele => ele.apportionMeterChildrenList = [])
      this.tableData = list
      this.totalCount = totalCount
      this.loading = false
    },
    // 表格行展开
    async expandChange(row) {
      const { data: { list } } = await getreportxiangqingapi({ mainRecordIds: row.mainRecordIds, measuringPointId: row.measuringPointId })
      this.tableData.forEach(ele => {
        if (ele.uuid == row.uuid) {
          ele.apportionMeterChildrenList = list
        }
      })
    },
    // 重置
    chongzhi () {
      localStorage.removeItem('buildingId')
      this.form = { buildingId: '', energyType: '', customerId: '', month: '' }
      this.getdatalist()
    },
    // 导出
    daochu () {
      exportexcel('mbm-microservice-biz/mbm/apportionment/record/exportExcel', { ...this.form }, '分摊报表')
    },
    // 刷新
    shuaxin () {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 调节表格密度
    command (val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    }
  }
}
</script>

<style scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  padding: 10px;
  height: 100%;
  .topbox{
    height: 80px;
    padding:20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .title{
      display:flex;
      justify-content:space-between;
    }
    .tablebox{
      margin-top: 10px;
      height: 88%;
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
  }
}
::v-deep .el-table__expand-icon{
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 /*2.展开按钮未点击的样式是加号带边框*/
 ::v-deep .el-table__expand-icon .el-icon-arrow-right:before{
   content: "\e6d9";
   border: 1px solid #ccc;
   padding: 1px;
 }
  /*2.按钮已点击展开之后的样式是减号带边框*/
  ::v-deep .el-table__expand-icon--expanded .el-icon-arrow-right:before{
  content: "\e6d8";
  }
 ::v-deep .el-table__expand-icon--expanded:hover {
  color: #409eff;
 }
 ::v-deep .el-icon-arrow-right:hover {
  color: #409eff;
 }
</style>